<template>	
	<div>
		<div class="header-div">
			<b>{{ titleEdit }}</b>
		</div>
       <el-form 
	   		:model="form" 
	   		label-width="150px"
			class="form-demo" >
	<el-row>
		<el-col :span="8">
         <el-form-item>
			<template #label><span class="custom-label">试题类型</span></template>
			<el-select v-model="form.type"  
			@change="typeChange"
			style="width: 100%;" default-first-option >
				<el-option
					v-for="item in options.questionTypes"
					:key="item.value"
					:label="item.label"
					:value="item.value"
					/>
			</el-select>
         </el-form-item>
		</el-col>
		<el-col :span="8">
         <el-form-item>
			<template #label><span class="custom-label">试题难度</span></template>
			<el-select v-model="form.difficulty"  style="width: 100%;"
				filterable
				allow-create
                placeholder="请选择对应的难度" >
				<el-option
					v-for="item in options.difficulties"
					:key="item.value"
					:label="item.label"
					:value="item.value"/>
			</el-select>
         </el-form-item>
		</el-col>
		</el-row>
		<el-row>
			<el-col :span="8">
         <el-form-item>
			<template #label><span class="custom-label">所属题库</span></template>
			<el-select v-model="form.question_bank"  style="width: 100%;"
				suffix-icon=""
                placeholder="所属题库" >
				<el-option
					v-for="item in options.questionKs"
					:key="item.value"
					:label="item.label"
					:value="item.value"/>
			</el-select>
				<!-- <el-button color="#1c84c6" style="width: 10%;">
					<i class="iconfont icon-plus2"></i>
				</el-button> -->
         </el-form-item>
		</el-col>
		<el-col :span="8">
         <el-form-item>
			<template #label>
				<span class="custom-label">试题来源</span>
			</template>
            <el-input v-model="form.source_test" style="width: 100%;" placeholder="原创"></el-input>
         </el-form-item>
		</el-col>
		</el-row>
         <el-form-item >
			<template #label>
				<span class="custom-label">试题标签</span>
			</template>
            <!-- <el-input v-model="form.label" placeholder="请输入标签..."></el-input> -->
			<el-select
				v-model="form.label"
				multiple
				filterable
				allow-create
				remote
				reserve-keyword
				placeholder="请输入标签..."
				:remote-method="remoteMethod"
				:loading="loading"
				style="width: 64.4%"
				tag-type="primary"
      		>
				<el-option
				v-for="item in tags"
				:key="item.value"
				:label="item.label"
				:value="item.value"
				/>
      	</el-select>
         </el-form-item>
		 <el-form-item >
			<template #label>
				<span class="custom-label">试题状态</span>
			</template>
            <!-- <el-input v-model="form.status"></el-input> -->
			<el-radio-group v-model="form.status">
				<el-radio :label="'正常'">正常</el-radio>
				<el-radio :label="'禁用'">禁用</el-radio>
			</el-radio-group>

         </el-form-item>
         <el-form-item >
			<template #label>
				<span class="custom-label">试题题干</span>
			</template>
			<Editor class="editor-big" v-model:model-value="form.question_stem"></Editor>
			<!-- {{  form.question_stem}} -->
         </el-form-item>
		 <!-- 单选框的内容 -->
         <el-form-item   v-if="form.type=='单选题'">
			<template #label>
				<span class="custom-label">设置选项</span>
			</template>
		  <div class="div-radio">	
				<div class="div-btn">
					<el-button color="#1c84c6" @click="addOption">
					<i class="iconfont icon-plus2"></i>增加选项</el-button>
					<span>点击按钮增加新的选项，并选择其中1个做为答案</span>
					</div>
			<el-scrollbar max-height="400px" style="width: 100%;">
				<el-space  wrap style="100%">
				 <el-card class="box-card" 
					body-style="background-color: #c2c2c2; padding: 0px 0px;"
					v-for="item in radioCount" :key="item">
					<template #header>
					<div class="card-header">
						<el-radio-group  v-model="form.test_answer" size="large">
						<el-radio :label="'选项'+String.fromCharCode(64+item)"/>		  
						</el-radio-group>
						<i class="iconfont icon-Close icon-f" @click="onDelete"></i> 
					</div>
					</template>
						<Editor class="editor-small2"  v-model:model-value="form.option_settings[item-1]"></Editor>
						<!-- {{ form.option_settings[item-1] }} -->
				</el-card>
			</el-space>
		</el-scrollbar>
	   <!-- <el-row > -->
	      <!-- <el-scrollbar max-height="400px">
				<el-col  v-for="item in radioCount" :key="item">
					<el-radio-group  class="option-radio"  v-model="radio1" size="large">
						<el-radio :label="'选项'+String.fromCharCode(64+item)" />
						<i class="iconfont icon-Close icon-f" @click="onDelete"></i>   
					</el-radio-group>
			     <Editor class="editor-small"></Editor>
				</el-col>
				</el-scrollbar> -->
			<!-- </el-row> -->
		</div>	
	</el-form-item>
	<!-- 多选框 -->
	<el-form-item   v-else-if="form.type=='多选题'">
			<template #label>
				<span class="custom-label">设置选项</span>
			</template>	
		
		  <div class="div-radio" >	
				<div class="div-btn">
					<el-button color="#1c84c6" @click="addOption">
					<i class="iconfont icon-plus2"></i>增加选项</el-button>
					<span>点击按钮增加新的选项，并选中对应选项做为答案</span>
					</div>
			<el-scrollbar max-height="400px" style="width: 100%;">
				<el-space  wrap style="100%">
				 <el-card class="box-card" 
					body-style="background-color: #c2c2c2; padding: 0px 0px;"
					v-for="item in radioCount" :key="item">
					<template #header>
					<div class="card-header">
						<el-checkbox-group v-model="form.test_answer">
							<el-checkbox :label="'选项'+String.fromCharCode(64+item)"  />
							
						</el-checkbox-group>
						<i class="iconfont icon-Close icon-f" @click="onDelete"></i> 
					</div>
					</template>
					<!-- v-model:model-value="form.option_settings[item-1].content -->
						<Editor class="editor-small2"  v-model:model-value="form.option_settings[item-1]"  ></Editor>
				</el-card>
				</el-space>
		</el-scrollbar>
		</div>	
		</el-form-item>
		<!-- 填空   数据回显的时候 需要自己处理-->
		<el-form-item   v-else-if="form.type=='填空题'">
			<template #label>
				<span class="custom-label">设置选项</span>
			</template>	
		  <div class="div-radio" >	
				<div class="div-btn">
					<el-button color="#1c84c6" @click="addOption">
					<i class="iconfont icon-plus2"></i>增加选项</el-button>
					<el-checkbox v-model="checkedK" />
					<span>混杂模式 批改时忽略考生答案的顺序给分</span>
					</div>
			<el-scrollbar max-height="400px" style="width: 100%;">
				<el-space  wrap style="100%">
				 <el-card class="box-card" 
					body-style="background-color: #c2c2c2; padding: 0px 0px;"
					v-for="item in radioCount" :key="item">
					<template #header>
					<div class="card-header">
						<el-text class="text-blank">填空题{{ item }}</el-text>
						<i class="iconfont icon-Close icon-f" @click="onDelete"></i> 
					</div>
					</template>
					<el-input v-model="blankAnswer"
						style="width: 100%; padding: 5px 10px;"
						placeholder="请填入答案"></el-input>
						<!-- <Editor class="editor-small2"></Editor> -->
				</el-card>
			</el-space>
		</el-scrollbar>
		</div>	
         </el-form-item>
		<!-- 判断题 -->
         <el-form-item  v-else-if="form.type=='判断题'">
			<template #label>
				<span class="custom-label">答案设置</span>
			</template>
			<el-radio-group v-model="form.test_answer">
				<el-radio :label="'正确'">正确</el-radio>
				<el-radio :label="'错误'">错误</el-radio>
			</el-radio-group>
         </el-form-item>
		<!-- 问答题 -->
         <el-form-item   v-else-if="form.type=='问答题'">
			<template #label>
				<span class="custom-label">答案设置</span>
			</template>
			 <Editor class="editor-small3" v-model="form.test_answer"></Editor>
         </el-form-item>
		<!-- 附件题   -->
         <el-form-item   v-else-if="form.type=='附件题'">
			<template #label>
				<span class="custom-label">答案设置</span>
			</template>
			<div>
			 <el-input v-model="test_answer" 
			  style="width: 100%;"
			 >
				<template #prepend>
					<el-upload 
					v-model:file-list="test_answer"
					action="..."
					multiple 
					:show-file-list="false"
					>
					  <el-button type="">选择文件</el-button>
					</el-upload>
				</template>
			 </el-input>
				<span class="span-fj">请上传*.txt;*.doc;*.pdf;*.docx;*.zip;*.rar格式的试题参考答案附件，10M以内。</span>
			 </div>
         </el-form-item>

         <el-form-item >
			<template #label>
				<span class="custom-label">答案解析</span>
			</template>
			<Editor class="editor-big" v-model:model-value="form.answer_analysis"></Editor>
			<!-- {{ form.answer_analysis }} -->
         </el-form-item>
		 <el-form-item>
			<el-button color="#1C84C6" @click="onSubmit">提交</el-button>
			<el-button @click="rollback" v-if="other=='other'">返回</el-button>
			<el-button @click="reSet" v-else>重新填写</el-button>
			</el-form-item>
       	</el-form>
		
    </div>
		<!-- </div> -->
	<!-- </div> -->
</template>

<script setup >
import { ref, reactive ,toRefs,onMounted,watch} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import Editor from '../../../components/WEditor.vue'
// 表格编辑时弹窗和保存
// const editVisible = ref(false);
let form = reactive({
    id:'', 
	question_bank:'',
    type: '单选题',
    status:'正常',    
	label :[],
    difficulty: '',
	question_stem:'',
    founder: '',
    modified_by: '',
    creation_time: '',
    change_modified: '',
    option_settings:[{content:''}],
	source_test: '',    
	test_answer:'选项A',
    answer_analysis:''
});

// 头部标题
let titleEdit = ref('创建试题')


 /*------------单选题------------*/
 const  radio1 = ref('选项A')
//添加选项 
//定义一个变量 增加选项的值 
const radioCount = ref(1)
const  addOption=()=>{
	radioCount.value++
	// console.log(form.option_settings,'<<<<<otpton')
}
//减去一下选项
const onDelete = () => {
  if (radioCount .value > 1) {
    radioCount .value--
  }
}

//当试题类型发生变化时需要初始化的数据
const typeChange=()=>{
	//当试题选项改变的时候需要 把计数进行初始化
	radioCount.value=1
}
/**多选题 */
const checkList= ref(['选项A'])

/**填空题 */
const checkedK= ref(true)
const blankAnswer = ref()

/** 判断题*/

/**问答题 */

/**附件题 */
const test_answer = ref()

//试题标签的状态   修改的时候 数据需要从后台获取  具体可以参照官方文档
const states = [
  'JAVASE',
  'JAVA基础',
  'JAVA训练',
]

const list = ref([{
	value:'',
	label:''
}])
const tags = ref([{
	value:'',
	label:''
}])
const loading = ref(false)

onMounted(() => {
  list.value = states.map((item) => {
    // return { value: `value:${item}`, label: `label:${item}` }
    return { value: `${item}`, label: `${item}` }
  })
})
// 从服务器搜索标签的方法
const remoteMethod = (query) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      tags.value = list.value.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase())
      })
    }, 200)
  } else {
    tags.value = []
  }
}
/* --------------------------------------------------- */
  const fText  = ref('asdf')
/*   */
const props = defineProps({
	rowData:Object,
	other:String,
})
const {rowData,other} = toRefs(props)
// console.log(rowData?.value,'<<<<<row')
// const emit = defineEmits(['update:rowData','change'])

const emit = defineEmits(['change'])
watch([rowData],(old,newX)=>{
	console.log('old',old,'newValue',newX,'11')
		form.question_bank = ''
		form.id = ''
		form.status = '正常'
		form.type='单选题'
		form.difficulty=''
		form.label=[]
		form.question_stem=''
		form.option_settings=[]
		form.source_test=''
		form.test_answer='选项A'
		form.answer_analysis=''
		titleEdit.value='创建试题'
		radioCount.value=1
})
onMounted(()=>{
	console.log(rowData?.value,'onMouted')
	if(rowData?.value){
		form.id=rowData.value.id//试题id
		form.question_bank=rowData.value.question_bank//试题所属库
		form.type=rowData.value.type //试题类型
		form.status=rowData.value.status  //试题状态
		form.label =rowData.value.label,//试题标签
		form.difficulty= rowData.value.difficulty//试题难度
		form.question_stem=rowData.value.question_stem//题干
		form.founder= rowData.value.founder
		form.modified_by= rowData.value.modified_by
		form.creation_time= rowData.value.creation_time
		form.change_modified= rowData.value.change_modified
		form.option_settings=rowData.value.option_settings//选项设置
		form.source_test=rowData.value.source_test    //试题来源
		form.test_answer=rowData.value.test_answer//答案
		form.answer_analysis=rowData.value.answer_analysis//答案解析
		titleEdit.value='修改试题'
		// console.log(form.id,'rrrr')
		if(form.option_settings){
		console.log(form.option_settings.length,'option-settings>>>')
		radioCount.value=form.option_settings.length
		}
	}else{
		titleEdit.value='创建试题'
		console.log(rowData,form,'rf')
	}
})


//保存添加或者修改的数据 ---需要重新实现
const onSubmit = () => {
	
	//
};
//重置 
function reSet(){
	form.question_bank=''
    form.type= ''
    form.status=''    
	form.label =[]
    form.difficulty= ''
	form.question_stem=''
    // form.founder= ''
    // form.modified_by= ''
    // form.creation_time= ''
    // form.change_modified= ''
    form.option_settings=[]
	form.source_test= ''  
	form.test_answer=''
    form.answer_analysis=''
}
//返回 
const rollback = ()=>{
  emit('change',true)
}


const options = reactive({
	questionTypes:[
	{
		value: '单选题',
		label: '单选题',
	},
	{
		value: '多选题',
		label: '多选题',
	},
	{
		value: '判断题',
		label: '判断题',
	},
	{
		value: '填空题',
		label: '填空题',
	},
	{
		value: '问答题',
		label: '问答题',
	},
	{
		value: '附件题',
		label: '附件题',
	},
	],
	difficulties:[
		{
			value: '请选择对应的难度',
			label: '请选择对应的难度',
		},
	{
		value: '极易',
		label: '极易',
	},
	{
		value: '容易',
		label: '容易',
	},
	{
		value: '一般',
		label: '一般',
	},
	{
		value: '较难',
		label: '较难',
	},
	{
		value: '极难',
		label: '极难',
	},
	],
	questionKs:[
		{
			value: '所有题库',
			label: '所有题库',
		},
	{
		value: '编程题库(共12题)',
		label: '编程题库(共12题)',
	},
	{
		value: '解答题库(共10题)',
		label: '解答题库(共10题)',
	},
	{
		value: '选择题库(共5题)',
		label: '选择题库(共5题)',
	},
	],
}
)

</script >
<style lang="less" scoped>
.el-form .el-input {
	width: 70%;
	
}
.el-form .el-textarea {
	width: 70%;
	
}
.custom-label{
	font-size: 14px;
  	font-weight: 900;
  	color: #666;
}
.header-div{
	background-color: #F5F5F5;
	color: #666666;
	margin: 0px 0px 10px;
	padding: 10px 10px; 
	font-size: 14px;
}
.main-div{
	border: 1px solid #f0f0f0;
 padding: 0px,15px,15px,15px;
}
.editor-big{
	width: 65%;
	// height: 150px;
	border: 1px solid #c2c2c2;
	margin-bottom: 20px;
	
}

.div-radio{
	width: 70%;
}
.div-btn{
	margin: 0px 0px 20px;
   .el-button{
	font-size: 14px;
	padding: 6px 12px;
	font-weight: 600;
	margin-right: 5px;
   }
	span{
		color:#888888;
		font-size: 13px;
	}
}
/* 选中后的字体颜色 */
/deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #333333 !important;
}
/* 选中后小圆点的颜色 */
/deep/ .el-radio__input.is-checked .el-radio__inner {
  background: #5CB85C !important;
  border-color: #5CB85C !important;
}
.editor-small{
	width: 80%;
	// height: 200px;
	border: 1px solid #c2c2c2;
	margin-bottom: 20px;
	margin-left: 10px;
}
.editor-small3{
	width: 80%;
	// height: 200px;
	border: 1px solid #c2c2c2;
	margin-bottom: 20px;
	// margin-left: 10px;
}
.editor-small2{
	// width: 80%;
	// height: 200px;
	border: 1px solid #c2c2c2;
}
.option-radio{
	background-color: #808080;
	width: 76.85%;
	margin-left: 10px;
	margin-bottom: 5px;
	padding: 5px 15px;
	border-radius: 5px 5px 0px 0px;
	.el-radio{
		color: #000;
	}
	
}
.icon-f{
	// margin-left: 70%;
	float: right;
}
.icon-f:hover{
	color: #000;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #c2c2c2;
}

// 修改卡片头的样式
.el-card ::v-deep .el-card__header {
  padding: 2px 10px;
  background-color:#c2c2c2;
}
// 修改卡片的样式
.box-card {
  width: 385px;//
  margin-right: 5px;
  margin-bottom: 5px;

}

// 多选框 备选选中的字体样式的修改
::v-deep .el-checkbox__label{
	color: #888888;
}
//选中字体颜色
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
color: #333333 !important;

}
//选中对勾框背景色边框色
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner, .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
border-color: #fff !important;
background-color:#0a65c0 !important;

}

//设置填空 中文字的样式 
.text-blank{
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}
.span-fj{
	color: #676a6c;
	margin: 0px 0px 5px;
	font-size: 13px;
	font-weight: 700;
}
</style>